import { Trans, withI18n } from '@lingui/react'
import { Alert, Modal, Tag } from 'antd'
import PropTypes from 'prop-types'
import React, { PureComponent } from 'react'

@withI18n()
class RemoverbModal extends PureComponent {
  state = {
    targetproject: {},
  }
  handleOk = () => {
    const { selected, onCancel, devices, movetorbresult, onMove } = this.props
    if (movetorbresult) {
      onCancel()
      return
    }
    let selects = []
    for (var index = 0; index < selected.length; index++) {
      const item = devices[selected[index]]
      if (item) selects.push(item)
    }
    onMove(selects)
  }

  render() {
    let {
      selected,
      devices,
      movetorbresult,
      movetorbloading,
      onMove,
      i18n,
      ...modalProps
    } = this.props
    let count = movetorbresult ? movetorbresult.successed : 0
    let names = ','
    selected = selected ? selected : []
    if (selected && selected.length > 0) {
      for (var index = 0; index < selected.length; index++) {
        let targ = devices[selected[index]]
        if (targ) {
          names += targ.DeviceName + ','
        }
      }
    }
    names = names.slice(1, names.length - 1)

    return (
      <Modal
        {...modalProps}
        closable={true}
        keyboard={false}
        confirmLoading={movetorbloading}
        okText={movetorbresult ? i18n.t`Close` : i18n.t`Confirm`}
        onOk={this.handleOk}
      >
        <Alert
          showIcon
          style={{ marginBottom: '10px' }}
          type="warning"
          message={`${i18n.t`Warning`}:`}
          description={
            <span>
              <b>{i18n.t`All devices that move to the recycling bin will not receive data reports`}</b>
              <br />
              <Trans>Include:</Trans>&nbsp;{names}
            </span>
          }
        />
        {movetorbresult ? (
          <Alert
            style={{ marginBottom: '10px', background: '#fff' }}
            message={i18n.t`Result`}
            description={
              <div>
                {count > 0 && (
                  <Alert
                    style={{ marginTop: '5px' }}
                    message={i18n.t`Successed ${count} items`}
                  />
                )}
                {movetorbresult.errors.length > 0 &&
                  movetorbresult.errors.map(item => {
                    return (
                      <Alert
                        style={{ marginTop: '5px' }}
                        type="warning"
                        showIcon
                        message={
                          i18n.t`Device` +
                          ` ${
                          item.DeviceName ? item.DeviceName : item.objectId
                          } ` +
                          i18n.t`Delete failed!`
                        }
                        description={item.reason}
                      />
                    )
                  })}
              </div>
            }
          />
        ) : (
            <Alert
              style={{ marginBottom: '10px', background: '#fff' }}
              message={`${i18n.t`Choosed Devices`}:`}
              description={selected.map(index => {
                const item = devices[index]
                if (item)
                  return (
                    <Tag color="cyan" style={{ marginTop: '10px' }}>
                      {item.DeviceName}
                    </Tag>
                  )
              })}
            />
          )}
      </Modal>
    )
  }
}

RemoverbModal.propTypes = {
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default RemoverbModal
